<template>
  <div style="width: 100%; height: 100%">
    <div class="content">
      <div class="top">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>在线考试系统</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/student' }"
            >考生管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>考试列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="search">
        <el-form
          status-icon
          :inline="true"
          :model="searchForm"
          ref="searchForm"
          class="demo-ruleForm"
        >
          <el-form-item label="考试名称" prop="examName">
            <el-input
              v-model="searchForm.examName"
              placeholder="考试名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="考试时长" prop="examTimeLimitEnd">
            <el-form-item prop="examTimeLimitStart">
              <el-input
                v-model="searchForm.examTimeLimitStart"
                style="width: 100px"
              ></el-input>
            </el-form-item>
            <span> -- </span>
            <el-form-item prop="examTimeLimitEnd">
              <el-input
                v-model="searchForm.examTimeLimitEnd"
                style="width: 100px"
              ></el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item label="更新时间" prop="examEndDate">
            <el-date-picker
              v-model="searchForm.examStartDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 200px"
            >
            </el-date-picker>
            <span> -- </span>
            <el-date-picker
              v-model="searchForm.examEndDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 200px"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchExam()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$router.go(0)">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="list">
        <el-table border style="width: 100%" :data="examList">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="png" label="封面" width="80">
          </el-table-column>
          <el-table-column prop="examName" label="考试名称"> </el-table-column>
          <el-table-column prop="examScore" label="总分数" width="100">
          </el-table-column>
          <el-table-column prop="username" label="创建人" width="100">
          </el-table-column>
          <el-table-column
            prop="examTimeLimit"
            label="考试时长(min)"
            width="120"
          >
          </el-table-column>
          <el-table-column label="更新时间">
            <template slot-scope="{ row, $index }">
              <!-- {{ row.updateTime | timeFormat }} -->
              {{ row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="{ row, $index }">
              <el-button type="success" @click="showExam(row, $index)"
                >考试</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :total="total"
          background
          layout="total, sizes,->,prev, pager, next"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          :current-page="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <!-- 考试详情框 -->
      <el-dialog
        title="考试详情"
        :visible.sync="dialogFormVisible"
        width="35%"
        label-width="40px"
      >
        <el-form :model="form" disabled>
          <el-form-item label="考试名称">
            <el-input v-model="form.examName"></el-input>
          </el-form-item>
          <el-form-item label="考试限时(min)">
            <el-input v-model="form.examTimeLimit"></el-input>
          </el-form-item>
          <el-form-item label="考试描述">
            <el-input
              type="textarea"
              rows="3"
              v-model="form.examDescription"
              resize="none"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="考试开始时间">
            <el-date-picker
              v-model="form.examStartDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="考试结束时间">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
            >
            </el-date-picker>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="examView" size="mini"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // let validatedtaLimitEnd = (rule, value, callback) => {
    //   console.log(rule)
    //   if (value == '') {
    //     callback()
    //   } else if (value < this.searchForm.examTimeLimitStart) {
    //     callback(new Error('开始时间不能大于结束时间'))
    //   }
    //   callback()
    // }
    // let validatedtaLimitStart = (rule, value, callback) => {
    //   console.log(rule)
    //   if (value == '') {
    //     validatedtaLimitEnd()
    //     this.callback()
    //   } else if (value > this.searchForm.examTimeLimitEnd) {
    //     callback(new Error('开始时间不能大于结束时间'))
    //   }
    //   callback()
    // }
    return {
      examList: [],
      dialogFormVisible: false,
      // 对话框表单
      form: {
        name: '',
        totalGoal: '',
        startTime: '',
        endTime: '',
        examTime: '',
        textDesc: ''
      },
      // 搜索表单
      searchForm: {
        examName: '',
        examTimeLimitStart: '',
        examTimeLimitEnd: '',
        examStartDate: '',
        examEndDate: ''
      },
      // rules: {
      //   // examTimeLimitStart: [
      //   //   { validator: validatedtaLimitStart, trigger: 'change' }
      //   // ],
      //   examTimeLimitEnd: [{ validator: validatedtaLimitEnd, trigger: 'blur' }]
      // },
      pageSize: 1,
      total: 0,
      page: 1,
      stuId: '35f1gb14sdf2115'
    }
  },
  mounted() {
    this.getExamList()
    // 清空数据
    this.$store.commit('CLEARDATA')
  },
  // filters: {
  //   timeFormat(value) {
  //     // let time = new Date(value).toLocaleString()
  //     // let time = time.split('-')
  //     return new Date(value)
  //   }
  // },
  methods: {
    getExamList() {
      // 35f1gb14sdf2115
      let val = 0
      for (let i in this.searchForm) {
        if (this.searchForm[i] != '' && this.searchForm[i]) {
          val++
        }
      }
      if (val >= 1) {
        this.$api.stuExam
          .selectStuExam(this.page, this.pageSize, this.stuId, this.searchForm)
          .then((res) => {
            this.examList = res.data.data.examVos
            this.total = res.data.data.total
          })
      } else {
        this.$api.stuExam
          .selectStuExamList(this.page, this.pageSize, this.stuId)
          .then((res) => {
            if (res.data.code == 200) {
              this.examList = res.data.data.examVos
              this.total = res.data.data.total
            } else {
              this.$message.error(res.data.msg)
            }
          })
      }
    },
    showExam(row, index) {
      this.form = { ...row }
      this.dialogFormVisible = true
    },
    async examView() {
      let result = await this.$api.stuExam.stuexamTopic(this.form.examId)
      this.$store.commit('SETEXAM', result.data)
      this.$store.commit('SETSTARTTIME', new Date())
      this.$store.commit('SETEXAMID', this.form.examId)
      this.$store.commit('SETSTUID', this.stuId)
      let exam = this.$store.state.exam.Allexam
      let pathName = ''
      console.log(exam)
      for (let i = 0; i < exam.length; i++) {
        if (exam[i].topic.length != 0) {
          pathName = exam[i].path
          break
        }
      }
      this.$router.push({
        name: pathName,
        query: { time: this.form.examTimeLimit },
        params: { id: 1 }
      })
    },
    searchExam() {
      this.page = 1
      this.$api.stuExam
        .selectStuExam(this.page, this.pageSize, this.stuId, this.searchForm)
        .then((res) => {
          this.examList = res.data.data.examVos
          this.total = res.data.data.total
        })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.page = 1
      this.getExamList()
    },
    handleCurrentChange(currentPage) {
      this.page = currentPage
      this.getExamList()
    }
  }
}
</script>

<style scoped>
.content {
  width: 80%;
  background: #fff;
  margin: 20px auto;
  box-sizing: border-box;
  padding: 30px 25px;
}
.el-breadcrumb {
  font-size: 16px;
}
.search {
  margin: 20px 10px 20px 0;
}
</style>
